<script setup>

</script>

<template>
  <div id="enter">
    <div>
      <img src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/src_img/enter1.png" alt="enter">
    </div>
    <div class="title">
      <text>welcome to my pet store</text>
      <a href="/mainPage" class="enterButton">立即进入</a>
    </div>
  </div>
</template>

<style scoped>
#enter{
  width: 100%;
  height: 600px;
  background-color: gray;
  overflow: hidden;
  position: relative;
  display: flex;
  margin-top: 0;
  /* justify-content: center; */
  /* align-items: center; */
}
#enter img{
  height: 600px;
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  z-index: 10;
}
#enter .title{
  width: 100%;
  height: 600px;
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#enter .title text{
  color: white;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 60px;
  margin-bottom: 150px;
}
#enter .title .enterButton{
  width: 200px;
  display: inline-block;
  padding: 10px 20px; /* 调整按钮内部间距 */
  font-size: 30px;
  color: white; /* 文字颜色为白色 */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #E966AA;
  border-radius: 4px; /* 添加圆角 */
  transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
  border: none;
}
#enter .title .enterButton:hover{
  background-color: #EBA0D9;
}

</style>
